<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>北京公交路网</title>
    <style>
      html,
      body,
      #container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" style="width: 800px; height: 600px;"></div>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=973c31822203d5d7e813bb2903afd5fe&plugin=Map3D"></script>
    <script src="https://webapi.amap.com/loca?key=973c31822203d5d7e813bb2903afd5fe&v=1.3.0"></script>

    <script>
      var map = new AMap.Map("map", {
        mapStyle: "amap://styles/1de318cbb8d12c02303a22c550b9ccc9",
        features: ["bg", "road"],
        center: [116.397732, 39.912152],
        zoom: 11.2,
        pitch: 46,
        viewMode: "3D",
      });

      var layer = new Loca.LineLayer({
        map: map,
      });
      function readFile(filePath) {
        // 创建一个新的xhr对象
        let xhr = null;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          // eslint-disable-next-line
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        const okStatus = document.location.protocol === "file" ? 0 : 200;
        xhr.open("GET", filePath, false);
        xhr.overrideMimeType("text/html;charset=utf-8");
        xhr.send(null);
        return xhr.status === okStatus ? xhr.responseText : null;
      }
      let p = new Promise((resolve, reject) => {
        resolve(readFile("//a.amap.com/Loca/static/mock/buslines_bj_zip.txt"));
      });
      p.then((data) => {
        var start = [];
        var lines = data.split("&").map(function (item) {
          return {
            linePath: item.split(";").map(function (lnglat, index) {
              var ll = lnglat.split(",");
              ll = [+ll[0], +ll[1]];
              if (index == 0) {
                start = ll;
              } else {
                ll = [ll[0] / 1000 + start[0], ll[1] / 1000 + start[1]];
              }
              return ll;
            }),
          };
        });
        console.log(lines);
        layer.setData(lines, {
          lnglat: "linePath",
        });

        layer.setOptions({
          style: {
            // 3D Line 不支持设置线宽，线宽为 1px
            // borderWidth: 1,
            opacity: 0.4,
            color: "#07E8E4",
          },
        });

        layer.render();
      });
    </script>
  </body>
</html>
